<template>
  <view class="item-style" @click="navigate(`/package_square/pages/course/detail?id=${props.data.id}`)">
    <u-image :src="data.cover_image" width="334" height="222" />
    <view class="flex-1 px-3 pt-2 c-#333 text-28 text-maxline-2">{{ data.class_name }}</view>
    <view class="px-3 pt-2">
      <view class="flex items-center c-#999">
        <u-image class="flex-shrink-0" :src="data.teacher_image" width="32" height="32" border-radius="50%" />
        <view class="pl-1 text-26 text-maxline-1">{{ data.teacher_name || '' }}</view>
        <view class="flex-shrink-0 mx-1">|</view>
        <view class="flex-shrink-0 text-24">{{ data.chapters_num || 0 }}课时</view>
      </view>
      <view class="pt-2 c-#333 text-24">
        <text>{{ data.study_num || 0 }}人学习·￥</text>
        <!-- <text v-if="isFree">0</text>
        <text v-else>{{ numFormat(data.price || 0) }}</text> -->
        <text>{{ numFormat(data.price || 0) }}</text>
      </view>
    </view>
    <view v-if="data.class_status == 1" class="label-style label-style2">已购买</view>
    <view v-else class="label-style">会员免费</view>
  </view>
</template>
<script setup>
import { navigate } from '@/common/util/uni';
import { numFormat } from '@/common/util/format';
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const props = defineProps({
  data: Object,
})

const isFree = computed(() => userStore.isVip || userStore.isConsultant)
</script>
<style lang="scss" scoped>
.item-style {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
  padding-bottom: 32rpx;
  overflow: hidden;
}

.label-style {
  position: absolute;
  width: 120rpx;
  height: 40rpx;
  color: #fff;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  background-color: #f4af22;
  border-radius: 12rpx 0px 12rpx 0rpx;

  &2 {
    background-color: #6FC9E7;
  }
}
</style>
